<template>
  <div>
    <h3>computed</h3>
    <!-- 计算属性是一个属性，写法是一个函数 要有返回值 -->
    <!-- 必须定义在computed节点中 -->
    <!-- 必须是一个 function必须有返回值-->
    <!-- 不能被当作方法来调用，当成属性 -->
    <input type="text" name="" id="" v-model.number="name1" />+
    <input type="text" name="" id="" v-model.number="name2" />=
    <input type="text" name="" id="" v-model.number="total" />
    <!-- <span>{{total}} </span> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      name1: "",
      name2: "",
    };
  },
  computed: {
    //计算属性的变量不能和data中的数据重名
    total: {
      get() {
        this.name1 + this.name2;
      },
      set(value) {
        // console.log(value);
        this.name1=value/2
        this.name2=value/2
      },
    },
  },
};
</script>

<style>
</style>